<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css 盒子模型</title>
	<style type="text/css">
		.box{
			/*设置盒子大小及背景色*/
			width: 200px;
			height: 100px;
			background-color: gold;

			/*设置上边界的宽度和颜色及风格*/
			/*border-top-width: 10px;
			border-top-color: #000;*/
			/*实线:solid  虚线:dashed  点线:dotted;*/
			/*border-top-style: solid; */

			/*border-top: 10px solid #000;
			border-left: 10px dashed #000;
			border-right: 10px dotted #000;
			border-bottom: 10px solid #000;*/

			/*边框*/
			border:10px solid #000;

			/*内间距*/
			/*padding-top: 20px;
			padding-left: 40px;
			padding-right: 100px;
			padding-bottom: 200px;*/

			/*顺时针:上 右 下 坐;*/
			/*padding: 20px 100px 200px 40px;*/

			/*上 左右 下*/
			/*padding: 20px 100px 200px;*/

			/*上下 左右*/
			padding: 20px 100px;

			/*外边距*/
			margin: 20px 100px;
		}
	</style>
</head>
<body>
	<div class="box">外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法</div>
	<div class="box">外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法</div>
</body>
</html>